<template>
  <view class="wrap">
    <image src="../../../static/mine.png" class="mineBg"></image>
    <uv-navbar title="" placeholder autoBack leftIconColor='#000' bgColor="rgba(0,0,0,0)"></uv-navbar>
    
    <view class="userInfo">
      <view class="left">
        <view class="avatar">
          <image :src="setUrl(userDetail.avatar)" mode="aspectFill" class="img"></image>
        </view>
        <view class="user">
          <view class="title">
            <text class="name">{{ userDetail.nickname }}</text>
          </view>
          <view class="desc">IP属地：{{ userDetail.city ? userDetail.city : '未知' }}</view>
        </view>
      </view>
      <template v-if="userId && userType">
        <view class="right" :class="{ red: userDetail.is_follow == 0 }" @click="followUser">{{ userDetail.is_follow == 0 ? '关注' : '已关注' }}</view>
      </template>
    </view>
    <view class="content">{{ userDetail.bio }}</view>
    <view class="focus">
      <view class="focus-on">
        <view class="item" @click="goPeople(1)">
          <view class="left">{{ userType ? 'TA' : '我' }}关注的人</view>
          <view class="number">{{ userDetail.follow_count }}</view>
        </view>
        <view class="item" @click="goPeople(2)">
          <view class="left">关注{{ userType ? 'TA' : '我' }}的人</view>
          <view class="number">{{ userDetail.be_follow_count }}</view>
        </view>
      </view>
    </view>
    <template v-if="groupList.length">
      <view class="hine">{{ userType ? 'TA' : '我' }}的社群</view>
      <view class="group">
        <uv-scroll-list :indicator='false'>
          <view class="group-list">
            <view class="group-list-item" v-for="(item, index) in groupList" :key="index" @click="goGroup(item)">
              <view class="left">
                <view class="avatar">
                  <image :src="setUrl(item.logo_image)" mode="aspectFill" class="img"></image>
                </view>
                <view class="user">
                  <view class="title">{{ item.name }}</view>
                  <view class="desc">社群号：{{ item.id }}</view>
                </view>
              </view>
            </view>
          </view>
        </uv-scroll-list>
      </view>
    </template>
    <view class="box">
      <view class="tabs">
        <uv-tabs :list="tabList" :current='active' scrollable lineWidth='36rpx' lineHeight='6rpx' lineColor='#E43222' inactiveStyle='font-weight: 500; font-size: 28rpx; color: #999999;' activeStyle='font-weight: 500; font-size: 28rpx; color: #2B2B2B;' itemStyle='height: 90rpx' @click="tabsClick"></uv-tabs>
      </view>
      <uv-line hairline></uv-line>
      <view class="list">
        <template v-if="active == 1">
          <question :detail='item' v-for="(item, index) in list" :key="index" :order='false' @followClick='followClick'></question>
        </template>
        <template v-else-if="active == 2">
          <answer :detail='item' v-for="(item, index) in list" :key="index" @followClick='followClick'></answer>
        </template>
        <template v-else-if="active == 5">
          <news :detail='item' v-for="(item, index) in list" :key="index" @followClick='followClick'></news>
        </template>
        <template v-else-if='active == 6'>
          <view class="takes">
            <live :detail='item' v-for="(item, index) in list" :key="index"></live>
          </view>
        </template>
        <template v-else>
          <theme :detail='item' v-for="(item, index) in list" :key="index" :order='false' @followClick='followClick'></theme>
        </template>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='100rpx'></uv-empty>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-modal ref="modal" title="提示">
      <view style="text-align: center;">{{msg}}</view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUser } from '@/store';
import { setUrl } from '@/common';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { post } from '@/api';
import theme from '../../../components/myTheme/theme.vue';
import answer from '../../../components/myTheme/answer.vue';
import question from '../../../components/myTheme/question.vue';
import news from '../../../components/dynamic/news.vue'
import live from '../../../components/myTheme/live.vue'

const modal = ref(null);

let tabList = ref([
  {name: '全部'},
  {name: '我的问题'},
  {name: '我的回答'},
  {name: '文件', type: {type: 2}},
  {name: '图文', type: {type: 1}},
  {name: '动态'},
  {name: '直播'}
]);
let active = ref(0);
let userId = ref('');
let userDetail = ref({});
let userType = ref(false);
let groupList = ref([]);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);
let msg = ref('');

const userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});

onLoad((option) => {
  if(option.id){
    userId.value = option.id;
  }else{
    userId.value = userInfo.value.user_id;
  }
  userType.value = userId.value != userInfo.value.user_id; // 判断登录用户是否跟被打开的用户一致
  tabList.value[1].name = (userType.value ? 'TA' : '我') + '的提问';
  tabList.value[2].name = (userType.value ? 'TA' : '我') + '的回答';
  
})
onShow(() => {
  setTimeout(() => {
    getUserDetail();
    getGroupList();
    
    if(active.value == 1){
      initQuestionList();
    }else if(active.value == 2){
      initAnswerList();
    }else if(active.value == 5){
      initNews();
    }else if(active.value == 6){
      initLive();
    }else{
      initThemeList(tabList.value[active.value].type)
    }
  }, 100)
})

// 获取用户信息
function getUserDetail(){
  post('api/user/getUserDetail', { access_user_id: userId.value }).then(res => {
    const data = res.data;
    userDetail.value = data;
  })
}
// 获取社群列表
function getGroupList(){
  const params = {
    page: 1,
    limit: 50,
    leader_id: userId.value
  }
  post('api/association/getAssociationList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      groupList.value = data;
    }
  })
}
// 获取主题列表
function getThemeList(value){
  const obj = {
    page,
    limit,
    user_id: userId.value
  }
  let params = {};
  if(value){
    params = Object.assign(obj, value);
  }else{
    params = uni.$uv.deepClone(obj);
  }
  post('api/association_theme/getAssociationThemeList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 获取提问列表
function getQuestionList(){
  const params = {
    page,
    limit,
    user_id: userId.value
  }
  post('api/association_question/getQuestionAnswerList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 获取回答列表
function getAnswerList(){
  const params = {
    page,
    limit,
    user_id: userId.value
  }
  post('api/association_answer/getAnswerList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function initNews(){
  const params = {
    page,
    limit,
    form_user_id: userId.value
  }
  post('api/news/getNewsList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function initLive(){
  const params = {
    page,
    pagePer: limit,
    userId: userId.value
  }
  post('/api/Live/getLiveByUser', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function initThemeList(value){
  list.value = [];
  page = 1;
  getThemeList(value);
}
function initQuestionList(value){
  list.value = [];
  page = 1;
  getQuestionList(value);
}
function initAnswerList(){
  list.value = [];
  page = 1;
  getAnswerList();
}
// 关注
function followUser(){
  const params = {
    follow_user_id: userId.value,
    way: userDetail.value.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      userDetail.value.is_follow = userDetail.value.is_follow == 1 ? 0 : 1;
    }
  })
}
function followClick(row){
  list.value.forEach(e => {
    if(row.userId == e.user.id){
      if(active.value == 3){
        e.user[row.type] = e.user[row.type] == 1 ? 0 : 1;
      }else{
        e[row.type] = e[row.type] == 1 ? 0 : 1;
      }
      
    }
  })
}
function tabsClick(value){
  active.value = value.index;
  list.value = [];
  page = 1;
  if(value.index == 1){
    initQuestionList();
  }else if(value.index == 2){
    initAnswerList();
  }else if(value.index == 5){
    initNews();
  }else if(value.index == 6){
    initLive();
  }else{
    initThemeList(value.type)
  }
}
function goPeople(index){
  if(!userType) return;
  uni.navigateTo({
    url: `/pages/mine/myTheme/people?id=${index}&userId=${userId.value}`
  });
}
function goGroup(row){
  if(row.is_expire){
    msg.value = '该社群已到期，请联系管理员';
    modal.value.open();
    return;
  }
  const url = row.apply_status == 2 ? '/pages/group/yes-detail' : '/pages/group/not-detail'
  uni.navigateTo({
    url: `${url}?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .takes{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20rpx;
  }
  .box{
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    /* #ifdef H5 */
    margin-top: 60rpx;
    /* #endif */
    /* #ifndef H5 */
    margin-top: 40rpx;
    /* #endif */
    position: relative;
    z-index: 3;
    .list{
      padding: 0 30rpx;
      background-color: #fff;
    }
    .tabs{
      padding: 0 30rpx;
      :deep(.uv-tabs__wrapper__nav__item){
        padding: 0 30rpx;
      }
    }
  }
  .group{
    padding: 0 30rpx;
    padding-top: 16rpx;
    width: 100%;
    :deep(.uv-scroll-list){
      padding-bottom: 0;
    }
    &-list{
      display: flex;
      &-item{
        width: 420rpx;
        height: 132rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        margin-right: 24rpx;
        padding: 16rpx;
        &:last-child{
          margin-right: 0;
        }
        .left{
          display: flex;
          align-items: center;
          .user{
            padding-left: 20rpx;
            width: 0;
            flex: 1;
            .desc{
              padding-top: 12rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .title{
              font-weight: 400;
              font-size: 32rpx;
              color: #2B2B2B;
              padding-right: 8rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .avatar{
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            overflow: hidden;
          }
        }
      }
    }
  }
  .hine{
    padding: 0 30rpx;
    padding-top: 30rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #737373;
  }
  .focus{
    position: relative;
    z-index: 2;
    padding: 0 30rpx;
    &-on{
      padding: 30rpx 0;
      border-top: 1px solid #E6E6E6;
      border-bottom: 1px solid #E6E6E6;
      display: flex;
      align-items: center;
      .item{
        flex: 1;
        display: flex;
        align-items: center;
        .number{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
          padding-left: 4rpx;
        }
        .left{
          font-weight: 400;
          font-size: 24rpx;
          color: #737373;
        }
      }
    }
  }
  .content{
    font-weight: 400;
    font-size: 28rpx;
    color: #737373;
    position: relative;
    z-index: 2;
    padding: 0 30rpx;
    padding-bottom: 30rpx;
  }
  .userInfo{
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding-top: 44rpx;
    padding-bottom: 40rpx;
    .right{
      width: 128rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #F5F5F5;
      border-radius: 64rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #B8B8B8;
      text-align: center;
      &.red{
        color: #FFFFFF;
        background-color: #E43222;
      }
    }
    .left{
      display: flex;
      align-items: center;
      .user{
        padding-left: 24rpx;
        .desc{
          padding-top: 12rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
        .title{
          display: flex;
          align-items: center;
          .name{
            font-weight: 500;
            font-size: 40rpx;
            color: #2B2B2B;
            padding-right: 8rpx;
          }
        }
      }
      .avatar{
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .mineBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>